<template>
  <div class="content">
    <h1>医生咨询</h1>
    <div class="querylist">
      <div style="flex-direction: column;align-items: center;justify-content: center;" v-for="(item, key) in answer" :key="key">
        <div class="userbox" v-if="key%2==0">
          <!-- <div class="user_question"> -->
            您：{{ item.content ? item.content : item }}
          <!-- </div> -->
          <!-- <img :src="avatar" alt="" style=" position: absolute; top: 0; right: 0; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;"> -->
        </div>
        <div class="doctorbox" v-if="key%2==1">
          <!-- <img :src="avatar" alt="" style=" position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;"> -->
          <!-- <div class="doctor_answer"> -->
            医生：{{ item.content ? item.content : item}}
          <!-- </div> -->
        </div>
      </div>
    </div>
    <textarea class="querybox" id="query" name="query" v-model="message"></textarea>
    <el-button class="button" type="primary" @click="getmessage">
      询问
    </el-button>
  </div>
  <!-- <ul>
    <li v-for="(item, key) in answer" :key="key">{{ item }}</li>
  </ul> -->

</template>

<style scoped>
  .content {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 800px;
    height: 700px;
    /* background-color: #f5f5f5; */
  }
  .querylist{
    position: absolute;
    top: 50px;
    right: 0;
    width: 800px;
    height: 440px;
    padding: 0;
    /* background-color: aqua; */
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid #ccc;
  }
  .doctorbox{
    display: flex; 
    position: relative; 
    width: 800px; 
    height: auto;
    background-color: rgb(109, 234, 209);
  }
  .doctor_answer{
    position: absolute; 
    margin-top: 15px; 
    top: 0; 
    left: 70px; 
    width: auto; 
    max-width: 700px; 
    background-color: forestgreen; 
    height: auto;
    border-radius: 5px;
  }
  .userbox{
    position: relative; 
    width: 800px; 
    height: auto; 
    background-color: wheat;
  }
  .user_question{
    position: absolute; 
    margin-top: 15px; 
    top: 0; 
    right: 70px; 
    width: auto; 
    max-width: 700px; 
    background-color: rgb(145, 171, 41); 
    height: auto;
    border-radius: 5px;
  }
  .querybox{
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 800px;
    height: 150px;
    padding: 0;
    padding-top: 5px
  }
  .button{
    position: absolute;
    width: 800px;
    height: 50px;
    bottom: 0;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let id = route.query.id

  let name = route.query.name

  let department = route.query.department

  let avatar = route.query.avatar

  let user_id = ref("")

  let message = ref("")

  let answer = ref([])

  const initquery=()=>{
    axios.get(`http://127.0.0.1:8000/doctor/consultation/?doctor_id=${id}&name=${name}&department=${department}`, {
      headers:{
        Authorization: "Bearer " + localStorage.getItem("access_token")
      }
    })
    .then(res=>{
      console.log(res)
      user_id.value = res.data.user_id
      res.data.data.shift()
      answer.value = res.data.data
      console.log(answer.value)
      console.log(user_id.value)
      console.log(avatar)
      console.log(11111111)
    })
    .catch(error=>{
      console.log(error)
    })
  }

  // 非流式输出
  // const getmessage=()=>{
  //   answer.value.push("您：" + message.value)
  //   axios.post(`http://127.0.0.1:8000/doctor/consultation/`, {"message": message.value})
  //   .then(res=>{
  //     console.log(res)
  //     answer.value.push(name + "：" + res.data.data)
  //   })
  //   .catch(error=>{
  //     console.log(error)
  //   })
  // }

  //流式输出
  let source = ref("")

  const getmessage=()=>{
    answer.value.push(message.value)
    answer.value.push("")
    source.value = new EventSource(`http://127.0.0.1:8000/doctor/query/?message=${message.value}&user_id=${user_id.value}&doctor_id=${id}`)
    message.value = ""
    source.value.onmessage = (event) => {
      console.log(event)
      answer.value[answer.value.length-1] += event.data
      console.log('流式响应结果：' + event.data)
    }

    source.value.onerror = (event) => {
      console.log(event)
      source.value.close()
    }
  }

  onMounted(()=>{
    initquery()
  })

</script>
